<!-- 用户管理 -->
<script setup lang="ts">
import {defineOptions, reactive, ref, watch, onMounted} from 'vue';
import {AForm} from '@/components/index';
import {useForm, useTable, useDict} from '@/hooks/index';
import {userDeptTreeGET, userListGET} from '@/services/system/user.service';
import EditModal from './components/EditModal.vue';

defineOptions({name: 'SystemUser'});

const {sys_normal_disable, sys_user_sex} = useDict('sys_normal_disable', 'sys_user_sex');
// console.log('sys_normal_disable', sys_normal_disable);

const deptTreeData = ref<any[]>([]); // 部门结构数据
const expandedKeys = ref<string[]>([]); // 点击是否展开
const selectedKeys = ref<string[]>([]); // 是否选中
const formData = reactive({
  userName: undefined, // 用户名称
  phonenumber: undefined, // 手机号码
  status: undefined, // 状态
  dateRange: [], // 创建时间
});
const queryParams = {
  pageNum: 1,
  pageSize: 10,
  deptId: undefined,
};
const rules = reactive({});
// sys_normal_disable.value
const formItem = reactive([
  {label: '用户名称', itemKey: 'userName', itemType: 'input', allowClear: true, col: 6},
  {label: '手机号码', itemKey: 'phonenumber', itemType: 'input', allowClear: true, col: 6},
  {
    label: '状态',
    itemKey: 'status',
    itemType: 'select',
    // options: [{elTagClass: '', elTagType: 'primary', label: '正常', value: '0'}],
    options: sys_normal_disable.value,
    allowClear: true,
    col: 6,
  },
  {label: '创建时间', itemKey: 'dateRange', itemType: 'date-range-picker', allowClear: true, col: 6},
]);
const columns = [
  {
    title: '用户编号',
    field: 'userId',
  },
  {
    title: '用户名称',
    field: 'userName',
  },
  {
    title: '用户昵称',
    field: 'nickName',
  },
  {
    title: '部门',
    field: 'dept',
    formatter: ({cellValue, row, column}: any) => cellValue?.deptName,
  },
  {
    title: '手机号码',
    field: 'phonenumber',
  },
  {
    title: '状态',
    field: 'status',
  },
  {
    title: '创建时间',
    field: 'createTime',
    width: 150,
  },
  {
    title: '操作',
    field: 'createTime',
    width: 300,
    slots: {default: 'operate'},
  },
];
const visible = ref<boolean>(false);
const id = ref<string | undefined>();
onMounted(() => {
  getTableData();
});
/** 查询部门下拉树结构 */
async function getDeptTree() {
  const result = await userDeptTreeGET();
  if (result?.code === 200 && !!result.data) {
    deptTreeData.value = result.data;
    // console.log('查询部门下拉树结构', result);
  }
}
const {tableState, gridOptions, getTableData, resetTableData} = useTable({
  request: async () => {
    return await userListGET({...queryParams, ...formData});
  },
  columns,
});

const {validateInfos, handleSubmit, handleReset} = useForm({
  formData,
  rules,
  submit: () => {
    getTableData();
  },
  reset: () => {
    resetTableData();
  },
});
const onSelect = (e: any, row: any) => {
  console.log('Row', row.node.id);
  queryParams.deptId = row.node.id;
  handleSubmit();
};

const showModal = (row: any) => {
  visible.value = true;
  if (row) {
    // console.log('row', row);
    id.value = row.userId;
  } else {
    id.value = '';
  }
};

watch(expandedKeys, () => {
  console.log('expandedKeys', expandedKeys);
});
watch(sys_normal_disable, () => {
  console.log('ddd');
  formItem.forEach((item: any) => {
    if (item.itemKey === 'status') {
      item.options = sys_normal_disable.value;
    }
  });
});

getDeptTree();
// console.log('tableState', tableState.data);
</script>

<template>
  <div class="app-container">
    <AForm
      :formData="formData"
      :formItem="formItem"
      :validateInfos="validateInfos"
      @submit="handleSubmit"
      @reset="handleReset"
    >
      <template #render_left>
        <a-button type="primary" @click="showModal">新增</a-button>
        <a-button type="dashed" style="margin-left: 10px">导入</a-button>
        <a-button style="margin-left: 10px">导出</a-button>
      </template>
    </AForm>
    <div class="content">
      <div class="tree-view">
        <a-tree
          v-model:expandedKeys="expandedKeys"
          v-model:selectedKeys="selectedKeys"
          :tree-data="deptTreeData"
          @select="onSelect"
        >
          <template #title="{label}">
            <span>{{ label }}</span>
          </template>
        </a-tree>
      </div>
      <div class="table-view">
        <vxe-grid ref="vxeGrid" v-bind="gridOptions" :data="tableState.data" :loading="tableState.loading">
          <template #operate="{row}">
            <vxe-button status="danger" content="修改" @click="showModal(row)"></vxe-button>
            <vxe-button status="danger" content="删除"></vxe-button>
            <vxe-button status="danger" content="更多"></vxe-button>
          </template>
        </vxe-grid>
        <vxe-pager
          background
          v-model:current-page="tableState.page"
          v-model:page-size="tableState.pageSize"
          :page-sizes="tableState.pageSizes"
          :total="tableState.total"
        >
        </vxe-pager>
      </div>
    </div>
    <EditModal v-model:visible="visible" :id="id" :deptTreeData="deptTreeData" @request="handleSubmit" />
  </div>
</template>

<style lang="less" scoped>
.app-container {
  // padding: 10px 20px;
  height: calc(100% - 200px);
  .content {
    height: 100%;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    .tree-view {
      width: 260px;
      min-width: 260px;
    }
    .table-view {
      // flex: 1;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
